<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>报警管理</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <!-- link bootstrap -->
  <link rel="stylesheet" href="../css/bootstrap.min14ed.css">
  <link rel="stylesheet" href="../css/style.min862f.css">
  <style>
    .row .alarm{
      background-color: #23c6c8;
      color: #fff;
      border-radius: 5px;
      padding: 8px 10px;
      float: left;
      margin: 10px;
    }
    .el-table__row{
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak v-show="appShow"  class="animated fadeInRight">
    <el-form ref="carVehicleForm" :model="carVehicleForm" label-width="80px" style="width: 900px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="车型/代号">
            <el-input v-model="carVehicleForm.modelCode" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="VIN码">
            <el-input v-model="carVehicleForm.vinCode" clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="onSubmit" clearable size="small" v-show="resourceMap.queryVehicleInfo">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <br>
    <!-- table -->
    <el-table :data="tableData.list" border size="small" :max-height="windowHeight" style="width: 100%" >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" ></el-table-column>
      <el-table-column prop="modelCode" label="车型/代号" width=""></el-table-column>
      <el-table-column prop="plateNo" label="车牌号"> </el-table-column>
      <el-table-column prop="vehicleType" label="类型"></el-table-column>
      <el-table-column prop="gmt_create" label="注册时间"></el-table-column>
      <!-- <el-table-column prop="gmt_modified" label="激活时间"></el-table-column> -->
      <el-table-column label="是否在线" width="">
        <template slot-scope="scope">
          <span class="label-inuse" v-if="scope.row.online">在线</span>
          <span class="label-outuse" v-else>不在线</span>
        </template>
      </el-table-column>
      <el-table-column prop="vinCode" label="VIN码" width=""></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary"  @click="handleInfo(scope.row)">查看报警</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- page -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[20,50,100,150,200]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="tableData.totalElement">
    </el-pagination>
    <!------------------------- dialog warning start ----------------------->
    <el-dialog
      title="报警详情"
      :visible.sync="dialogVisible">
        <div class="wrapper wrapper-content gray-bg">
          <el-container>
            <el-header>
                <div style="margin-left: -20px;">
                    <el-date-picker
                      v-model="alarmParame.timeValue"
                      type="datetimerange"
                      align="center"
                      size="small"
                      style="width:335px;font-size: 12px"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch"></el-button>
              </div>
            </el-header>
            <el-container>
              <el-aside width="380px">
                  <div class="ibox float-e-margins">
                      <div class="ibox-title">
                          <h5>报警时间列表</h5>
                      </div>
                      <div class="ibox-content">
                          <el-table :data="gridData.list" size="mini" highlight-current-row @current-change="tableCurrentChange">
                            <el-table-column type="index" ></el-table-column>
                            <el-table-column property="upload_TIME" label="报警时间"></el-table-column>
                            <el-table-column property="halarm_LEVEL" label="报警等级" width="80">
                              <template slot-scope="scope">
                                  <span class="label-outuse">{{scope.row.halarm_LEVEL}}级</span>
                              </template>
                            </el-table-column>
                          </el-table>                          
                      </div>
                  </div>
              </el-aside>
              <el-main> 
                  <div style="margin:-20px 0" v-if="Object.keys(gridItem).length">
                      <div class="ibox float-e-margins">
                          <div class="ibox-title">
                              <h5>故障总数报警</h5>
                          </div>
                          <div class="ibox-content">                        
                            <div class="row">
                              <div class="alarm animated tada">
                                  发动机故障总数:{{gridItem.total_ENGINE_FAULTS}}
                              </div>
                              <div class="alarm animated tada">
                                  驱动电机故障总数:{{gridItem.total_MOTOR_FAULTS}}
                              </div>
                              <div class="alarm animated tada">
                                  其他故障总数:{{gridItem.total_OTHER_FAULTS}}
                              </div>
                              <div class="alarm animated tada">
                                  可充电储能装置故障总数:{{gridItem.total_STORAGE_FAULTS}}
                              </div>
                            </div>
                          </div>
                      </div>
                      <div class="ibox float-e-margins">
                          <div class="ibox-title">
                              <h5>报警描述</h5>
                          </div>
                          <div class="ibox-content">                        
                            <div class="row">
                              <div class="alarm animated tada" v-for="item in gridItem.alarmDetail">
                                  {{item}}
                              </div>
                            </div>
                          </div>
                      </div>
                  </div> 
                  <!-- <div style="padding-top: 35%;" v-else>
                      <div class="sk-spinner sk-spinner-wandering-cubes">
                          <div class="sk-cube1"></div>
                          <div class="sk-cube2"></div>
                      </div>
                  </div>              -->
              </el-main>
            </el-container>
            <el-footer>
                <div style="margin-left: -40px;">
                  <el-pagination
                    background
                    @current-change="handleCurrentChangeInfo"
                    :current-page.sync="alarmParame.page"
                    :page-size="alarmParame.pageSize"
                    :pager-count="5"
                    layout="prev, pager, next, jumper"
                    :total="gridData.totalCount">
                  </el-pagination>                  
                </div>
            </el-footer>
          </el-container>                        
        </div>
    </el-dialog>
    <!------------------------- dialog warning end ----------------------->
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm=new Vue({
      el: '#app',
      data: function() {
        return {
          appShow:false,
          resourceMap:storageLocal.getName('vehicle'),
          tableData: [],
          carVehicleForm: {},
          formLabelWidth:'120px',
          windowHeight:(window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 170,
          currentPage:1,
          pageSize:50,
          dialogVisible:false,
          alarmParame:{//报警参数
            page:1,
            pageSize:10,            
          },
          gridData:[],
          gridItem:{}
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.requestModel()
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
          onSubmit:function() {//查询
            this.currentPage = 1;
            this.requestModel()
          },         
          handleSizeChange:function(val) {//table-分页
            this.pageSize = val;
            this.requestModel()
          },
          handleCurrentChange:function(val) {//table-分页
            this.requestModel()
          },
          requestModel:function(){
            var data = {
              "modelCode":this.carVehicleForm.modelCode?this.carVehicleForm.modelCode:'',
              "vehicleType":this.carVehicleForm.vehicleType?this.carVehicleForm.vehicleType:'', 
              "vinCode":this.carVehicleForm.vinCode?this.carVehicleForm.vinCode:'', 
              "tboxSerialNo":this.carVehicleForm.tboxSerialNo?this.carVehicleForm.tboxSerialNo:'', 
              "simNo":this.carVehicleForm.simNo?this.carVehicleForm.simNo:'', 
              "page":this.currentPage -1 ,
              "pageSize":this.pageSize
            }
            resourceRequst("/vehicle/queryVehicleInfo",data,function(res){
                vm.tableData = res.getResult
            })
          },
          // 报警详情
          handleInfo:function(row){
              this.alarmParame.page = 1
              this.alarmParame.vin = row.vinCode
              this.handleInfoRequest()
          },
          tableCurrentChange(val) {
            var _this = this;
            if(val && Object.keys(val).length){
              this.gridItem = {}
              setTimeout(function(){
                _this.gridItem = val
              },0)
            } 
          },
          handleCurrentChangeInfo:function(val) {//table-详情-分页
            this.alarmParame.page = val
            this.handleInfoRequest()
          },
          handleSearch:function(){
            this.alarmParame.page = 1
            this.alarmParame.startTime = this.alarmParame.timeValue?this.alarmParame.timeValue[0]:""
            this.alarmParame.endTime = this.alarmParame.timeValue?this.alarmParame.timeValue[1]:""

            this.handleInfoRequest()
          },
          handleInfoRequest:function(){
              var _this = this
              var data = {
                page:this.alarmParame.page,
                pageSize:this.alarmParame.pageSize,
                vin:this.alarmParame.vin,
                startTime:this.alarmParame.startTime || "",
                endTime:this.alarmParame.endTime || "",
              }
              this.gridItem = {}
              resourceRequst("/alarm/queryAlarmList",data,function(res){
                  _this.gridData = res
                  _this.dialogVisible = true
                  if(res.list.length){
                    _this.gridItem = res.list[0]
                  }
              })
          }
        }
    })
  </script>
</html>